<template>
 <ul class="list">
     <li class="item" v-for="item in letters" 
     :key="item"  :ref="item"    @touchstart="handleTouchStart" @touchomove="handleTouchMove"                  
      @touchend="handleTouchEnd"  @click="handleLetterClick"      
      >
       {{ item }}
       </li>
 </ul>
</template>

<script>
   export default{
     name:'CityAlphabet',
     props:{
       cities:Object
     },
     computed:{
       letters(){
         const letters = []
         for(let i in this.cities){
           letters.push(i)
         }
         return letters
       }

     },
     data (){
       return {
         touchStatus: false ,
         startY:0,
         timer:null
       }
     },
     updated (){
        this.startY = this.$refs['A'][0].offsetTop
     },
     methods:{
       handleLetterClick(e){
          this.$emit('change',e.target.innerText)
       },
       handleTouchStart (){
         this.touchStatus = true
       },
       handleTouchMove(){
         if(this.touchStatus){
               if(this.touchStatus){
                  if(this.timer){
                    clearTimeout(this.timer)
                  }
              this.timer =setTimeout( () =>{
                    const touchY = e.touches[0].clientY - 79
                    const index = Math.floor((touchY - this.startY ) / 20 )
                    if(index >= 0 && index < this.letters.length){
                    this.$emit('change',this.letters[index])
               }           
              },16)
        
            }
         }
       },
       handleTouchEnd (){
         this.touchStatus = false
       }
     }
   }


</script>

<style scoped>
.alphabet{
 position: relative;
}
.list{
    
    display: flex;
    flex-direction: column;
    justify-content: center;  /*这三行代码让其水平方向居中 */
    position: absolute;
    right:0;
    top:320px;
    height:510px;
    list-style-type: none;
}
.list li{
     text-align: center;
      line-height: 20px;
      padding-right: 5px;
      color:#00bcd4;
    
   
}
</style>